
import { PureComponent } from 'react'
import { connect } from 'react-redux';
import { Link } from 'react-router-dom'
import * as action from '../../actions/user'
import Errors from '../../components/Errors';

const errors = null

class Login extends PureComponent {
    changeUserEmail = (ev) => {
        this.props.onEmailChange('email', ev.target.value)
    }
    changePassword = (ev) => {
        this.props.onPasswordChange('password', ev.target.value)
    }
    onSubmitForm = (email, password) => (ev) => {
        ev.preventDefault()
        //网络接口请求 ： 登录
        this.props.onSubmitUser({ email, password })
    }
    render() {
        const { email, password, errors } = this.props
        return (
            <div className='container page'>
                <div className='row'>
                    <div className='col-md-6 offset-md-3 col-xs-12'>
                        <h1> 登 录 </h1>
                        {
                            errors ? <Errors errors={errors} /> : null
                        }

                        <form onSubmit={this.onSubmitForm(email, password)}>
                            <fieldset>
                                <fieldset className='form-group'>
                                    <input
                                        className='form-control form-control-lg'
                                        type='email'
                                        placeholder='用户邮箱'
                                        value={email}
                                        onChange={this.changeUserEmail}
                                    />
                                </fieldset>
                                <fieldset className='form-group'>
                                    <input
                                        className='form-control form-control-lg'
                                        type='password'
                                        placeholder='用户密码'
                                        value={password}
                                        onChange={this.changePassword}
                                    />
                                </fieldset>
                                <button
                                    className='btn btn-lg btn-primary pull-xs-right'
                                    type='submit'
                                >
                                    点我登录
                                </button>
                            </fieldset>
                        </form>
                        <p className='text-xs-center'>
                            <i class="fa fa-home fa-1x"></i> <Link to='/regist'>
                                没有账号点击此处注册？--v--
                            </Link>
                        </p>
                    </div>
                </div>
            </div>
        )

    }
}
const mapState = state => ({ ...state.user })

//行为
const mapDispatch = dispatch => {
    return {
        onEmailChange: (key, value) => dispatch(action.loginFieldUpdate(key, value)),
        onPasswordChange: (key, value) => dispatch(action.loginFieldUpdate(key, value)),
        onSubmitUser: (user) => dispatch(action.loginSubmit(user))
    }
}



export default connect(mapState, mapDispatch)(Login)




